<template>
  <div class="system-settings">
    <h2>系统设置</h2>
    <a-form
        :model="formState"
        :label-col="{ span: 24 }"
        :wrapper-col="{ span: 24 }"
        class="max-w-2xl mx-auto"
    >
      <a-form-item label="网站名称">
        <a-input v-model:value="formState.siteName" />
      </a-form-item>
      <a-form-item label="网站描述">
        <a-textarea v-model:value="formState.siteDescription" :rows="4" />
      </a-form-item>
      <a-form-item label="管理员邮箱">
        <a-input v-model:value="formState.adminEmail" />
      </a-form-item>
      <a-form-item label="每页显示记录数">
        <a-input-number v-model:value="formState.pageSize" :min="1" :max="100" />
      </a-form-item>
      <a-form-item label="启用用户注册">
        <a-switch v-model:checked="formState.enableRegistration" />
      </a-form-item>
      <a-form-item label="维护模式">
        <a-switch v-model:checked="formState.maintenanceMode" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 24 }">
        <a-button type="primary" @click="onSubmit" class="w-full">保存设置</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import { message } from 'ant-design-vue';

const formState = reactive({
  siteName: '管理员系统',
  siteDescription: '这是一个强大的管理员系统平台',
  adminEmail: 'admin@example.com',
  pageSize: 20,
  enableRegistration: true,
  maintenanceMode: false,
});

const onSubmit = () => {
  console.log('表单数据:', formState);
  message.success('设置已保存');
};
</script>

<style scoped>
.system-settings {
  padding: 24px;
}
:deep(.ant-form-item) {
  margin-bottom: 24px;
}
:deep(.ant-form-item-label) {
  padding-bottom: 8px;
}
:deep(.ant-input-number) {
  width: 100%;
}
</style>

